<template>
	<view class="custom-goods ss-p-y-12 ss-p-x-16" @click="jumpCustom(message)">
		<view class="custom-goods-info ss-flex">
			<image class="custom-goods-info-image ss-m-r-25" :src="cdn(message.payload.custom.imgUrl)"
				mode="aspectFill">
			</image>
			<view class="custom-goods-info-text ss-flex flex-column justify-between align-start">
				<view class="custom-goods-info-text-top">
					<view class="custom-goods-info-text-top-name ss-line-2">
						{{message.payload.custom.title}}
					</view>
					<view class="custom-goods-info-text-top-num ss-m-t-10">
						销量{{message.payload.custom.num}}</view>
				</view>
				<view class="custom-goods-info-text-bottom ss-flex justify-between align-end">
					<view class="custom-goods-info-text-bottom-price ss-flex-1 ss-line-1 ss-m-r-20">
						￥{{isArray(message.payload.custom.money) ? message.payload.custom.money[0] : message.payload.custom.money}}
					</view>
					<view class="custom-goods-info-text-bottom-btn">去下单</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		computed
	} from 'vue';
	import sheep from '@/sheep';
	import $store from '@/im/store/im';
	import {cdn,udid} from '@/im/config/index.js'
	
	const iMMyInfo = computed(() => $store().userInfo);
	
	const props = defineProps({
		message: {
			type: Object,
			default: {}
		}
	})
	
	
	const isArray = (value) => {
		return Array.isArray(value);
	}

	const jumpCustom = (msg) => {
		if (udid=== msg.payload.custom.tag) {
			uni.navigateTo({
				url:msg.payload.custom.linkUrl + `&im_id=${iMMyInfo.value.userID}`
			})
		} else {
			uni.showToast({
				title: '请前往指定平台查看详情!',
				icon: 'none',
				duration: 2000
			});
		}
	}
</script>

<style scoped lang="scss">
	view {
		box-sizing: border-box;
	}

	.custom-goods {
		width: 520rpx;
		background: #FFFFFF;
		border-radius: 12rpx;

		.custom-goods-title {
			width: 100%;
			font-weight: 400;
			font-size: 24rpx;
			color: #3D3D3D;
		}

		.custom-goods-info {
			.custom-goods-info-image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 10rpx;
			}

			.custom-goods-info-text {
				flex: 1;

				.custom-goods-info-text-top,
				.custom-goods-info-text-bottom {
					width: 100%;
				}

				.custom-goods-info-text-top-name {
					width: 100%;
					font-weight: 500;
					font-size: 28rpx;
					color: #322D28;
				}

				.custom-goods-info-text-top-num {
					font-weight: 350;
					font-size: 24rpx;
					color: #999999;
				}

				.custom-goods-info-text-bottom-price {
					font-weight: 500;
					font-size: 32rpx;
					color: #FC550B;
				}

				.custom-goods-info-text-bottom-btn {
					width: 122rpx;
					height: 54rpx;
					background: linear-gradient(257deg, #F15D00 0%, #F9CEA6 100%, #F9CEA6 100%);
					border-radius: 40rpx;
					font-weight: 350;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 54rpx;
					text-align: center;
				}
			}
		}
	}
</style>